<template>
  <div
    style="border: 1px solid lightgray; display: flex; width: 100%; height: 800px; background-color: #f0f0f0; border-radius: 10px;"
  >
    <div
      style="display: inline-block; width: 30%;height: 95%; margin-right: 30px;margin-left: 20px; background-color: white; padding: 10px; border-radius: 10px;"
    >
      <div style="display: flex; margin-left: 40px;">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable
          style="width: 300px; border-radius: 5px;"
        >
        </el-input>
      </div>

      <div style="margin-top: 10px; border-radius: 10px; margin-left: 40px">
        <el-tree :data="SZData" :props="defaultProps" @node-click="handleNodeClick"  >
          <template slot-scope="{ node, data }">
            <div class="tree-node">
              <span>{{ data.label }}</span>
              <i @click="handleCustomAction1(data)" class="custom-icon">+&nbsp;&nbsp;&nbsp;</i>
              <i @click="handleCustomAction2(data)" class="custom-icon">-</i>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
    <div
      style="display: inline-block; width: 100%;height: 95%; background-color: white;margin-right: 30px; padding: 10px; border-radius: 10px;"
    >
      <div>
        <div>公司信息</div>
        <div class="DivData" style="margin-top: 20px">机构编号<input type="text" v-model="core_org.id"
                                                                     class="no-border"
        /></div>
        <div class="DivData" style="margin-top: 20px">
          机构类型:
          <select v-model="core_org.org_type" class="no-border">
            <option value="1">分公司</option>
            <option value="2">一级转运中心</option>
            <option value="3">二级转运中心</option>
            <option value="4">网点</option>
          </select>
        </div>
        <div class="DivData" style="margin-top: 20px">机构地址: <input type="text" v-model="core_org.address"
                                                                       class="no-border"
        /></div>
        <div class="DivData" style="margin-top: 20px">机构负责人: <input type="text" v-model="core_org.manager_id"
                                                                         class="no-border"
        /></div>
        <div class="DivData" style="margin-top: 20px">机构电话: <input type="text" v-model="core_org.contract_number"
                                                                       class="no-border"
        /></div>
        <div class="button-with-line" style="margin-top: 30px">
          <el-button @click="UpdateTranslation"
                     style="background-color: #1e86fc; color: #ffffff; margin-top: 3px; margin-left: 20px"
          >编辑
          </el-button>
        </div>

      </div>

      <div style="margin-top: 30px;">
        <div>员工信息</div>
        <div>
          <el-button @click="AddEmp"
                     style="background-color: #1e86fc;color: #ffffff;margin-top: 20px;margin-left: 20px"
          >新增员工
          </el-button>
        </div>
        <el-table
          border
          ref="multipleTable"
          :data="UserTable"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            label="日期"
            prop="id"
            width="85"
          >
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="85"
          >
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机"
            width="85"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="org_id"
            label="所属机构"
            width="85"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="account"
            label="系统账号"
            width="85"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="角色"
            width="85"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="85"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="300"
            show-overflow-tooltip
          >
            <template slot-scope="scope" style="width: 100%">
              <div class="actions" style="width: 100%">
                <i style="color: #41a3fc" @click="updateEmpl(scope.row)">编辑员工信息</i>
                <span style="margin-right: 10px;"></span>
                <i style="color: #41a3fc" @click="updateRoot(scope.row)">编辑角色</i>
                <span style="margin-right: 10px;"></span>
                <i style="color: #41a3fc" @click="disable(scope.row)">禁用</i>
                <span style="margin-right: 10px;"></span>
                <i style="color: #41a3fc" @click="DelEmpl(scope.row)">删除</i>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalItems"
        ></el-pagination>

        <!--               添加员工-->
        <div>
          <el-dialog
            title="添加员工"
            :visible.sync="dialogVisible"
          >
            <el-form ref="employeeForm" label-width="100px" :model="employee"  :rules="rules">
              <el-form-item label="员工姓名" prop="name">
                <el-input v-model="employee.name"></el-input>
              </el-form-item>
              <el-form-item label="邮箱地址" prop="email">
                <el-input v-model="employee.email"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="employee.mobile"></el-input>
              </el-form-item>
              <el-form-item label="员工岗位" prop="station_id">
              <div>
                <select v-model="employee.station_id" id="typeSelect" style="height: 40px;width: 50%">
                  <option value="">请选择机构类型</option>
                  <option v-for="item in this.Station" :value="item.id" :key="item.id">{{ item.name }}</option>
                </select>
              </div>
              </el-form-item>
              <el-form-item label="工作描述" prop="work_describe">
                <el-input v-model="employee.work_describe"></el-input>
              </el-form-item>
              <el-form-item label="系统账号密码" prop="password">
                <el-input v-model="employee.password"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="employee.sex">
                  <el-radio label="M">男</el-radio>
                  <el-radio label="W">女</el-radio>
                  <el-radio label="N">未知</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible= false ">取消</el-button>
    <el-button type="primary" @click="handleSubmit1">确定</el-button>
  </span>
          </el-dialog>
        </div>

        <!--               添加下属机构-->
        <div>
          <el-dialog
            title="添加下属机构"
            :visible.sync="dialogVisible4"
          >
            <el-form ref="employeeForm" label-width="100px">
              <el-form-item label="组织名称" prop="name">
                <el-input v-model="emp.name"></el-input>
              </el-form-item>
              <el-form-item label="父编号" prop=" ">
                <el-input v-model="emp.parent_id"></el-input>
              </el-form-item>

              <div style="margin-left: 30px;margin-top: 30px;height: 50px">
                  机构类型:
                  <select style="height: 30px;width: 257px" v-model="emp.org_type" class="no-border">
                    <option value="" disabled selected>请选择机构类型</option>
                    <option value="1">分公司</option>
                    <option value="2">一级转运中心</option>
                    <option value="3">二级转运中心</option>
                    <option value="4">网点</option>
                  </select>
              </div>

              <el-form-item label="省" prop="province_id">
<!--                <el-select  v-model="emp.province_id"  placeholder="请选择">-->
<!--                  <el-option label="请选择省" value="option1"></el-option>-->
<!--                </el-select>-->
                <el-select v-model="emp.province_id" placeholder="请选择省份" clearable @change="handleSenderProvinceChange" :style="{ width: '70px', marginRight: '20px' }">
                  <el-option v-for="province in provinces" :key="province.id" :label="province.name" :value="province.id"></el-option>
                </el-select>

                <el-select v-model="emp.city_id" placeholder="请选择城市" clearable @change="handleReceiverCityChange" :style="{ width: '70px', marginRight: '20px' }">
                  <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id"></el-option>
                </el-select>

                <el-select v-model="emp.county_id" placeholder="请选择区域" clearable :style="{ width: '70px' }">
                  <el-option v-for="district in districts" :key="district.id" :label="district.name" :value="district.id"></el-option>
                </el-select>

<!--                <el-select v-model="emp.city_id"  placeholder="请选择">-->
<!--                  <el-option  label="请选择市" value="option1"></el-option>-->
<!--                </el-select>-->
<!--                <el-select v-model="emp.county_id"  placeholder="请选择">-->
<!--                  <el-option  label="请选择区" value="option1"></el-option>-->
<!--                </el-select>-->
              </el-form-item>
              <el-form-item label="请输入详细地址" prop="mobile">
                <el-input v-model="emp.address"></el-input>
              </el-form-item>
              <el-form-item label="机构负责人" prop="mobile">
                <el-input  v-model="emp.manager_id" readonly></el-input>
              </el-form-item>
              <el-form-item label="机构电话" prop="contract_number">
                <el-input v-model="emp.contract_number"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible4= false ">取消</el-button>
    <el-button type="primary" @click="handleSubmit4">确定</el-button>
  </span>
          </el-dialog>
        </div>




        <div>
          <el-dialog title="添加角色" :visible.sync="dialogVisible5">
            <el-checkbox-group v-model="selectedRoles"> <!-- 使用 el-checkbox-group 绑定已选角色 -->
              <el-checkbox
                v-for="role in AllRole1"
                :checked="isRoleSelected(role)"
                :label="role.id"
                :key="role.id"
              >
                {{ role.name }}
              </el-checkbox>
            </el-checkbox-group>

            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible5 = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit5">确定</el-button>
      </span>
          </el-dialog>
        </div>


        <!--修改员工信息-->
        <div>
          <el-dialog
            title="修改员工"
            :visible.sync="dialogVisible3"
          >
            <el-form ref="employeeForm" label-width="100px">
              <el-form-item label="员工姓名" prop="name">
                <el-input v-model="employee.name"></el-input>
              </el-form-item>
              <el-form-item label="邮箱地址" prop="email">
                <el-input v-model="employee.email"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="employee.mobile"></el-input>
              </el-form-item>
              <el-form-item label="员工岗位" prop="station_id">
                <el-input v-model="employee.station_id"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="employee.sex">
                  <el-radio label="M">男</el-radio>
                  <el-radio label="W">女</el-radio>
                  <el-radio label="N">未知</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible3 = false">取消</el-button>
    <el-button type="primary" @click="handleSubmit3">确定</el-button>
  </span>
          </el-dialog>
        </div>


        <!--    //编辑角色弹框-->
        <div style="width: 50%;height: 500px">
          <el-dialog :visible.sync="dialogVisible1" title="编辑角色">
            <el-button @click="AddRole" style="color: #ffffff;background-color: #4485fc">添加角色</el-button>
            <span style="height: 60px"></span>
            <!-- 在这里放置包含表格的内容 -->
            <el-table :data="RootTable" style="width: 100%;height: 400px">
              <el-table-column
                width="150"
                prop="id"
                label="角色编号"
              >
              </el-table-column>
              <el-table-column

                width="150"
                prop="org_type"
                label="机构类型"
              >
              </el-table-column>
              <el-table-column

                width="150"
                prop="name"
                label="角色名称"
              >
              </el-table-column>
              <el-table-column

                width="150"
                prop="describe"
                label="备注"
              >
              </el-table-column>
<!--              <el-table-column-->
<!--                width="150"-->
<!--                label="操作"-->
<!--              >-->
<!--                <template slot-scope="scope" style="width: 100%">-->
<!--                  <div class="actions" style="width: 100%">-->
<!--                    <i style="color: #41a3fc" @click="DelRole(scope.row)">删除角色</i>-->
<!--                    <span style="margin-right: 10px;"></span>-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
          </el-dialog>
        </div>





      </div>
    </div>


  </div>

</template>


<script>

import {
  AddCore,
  AddEmpl, addUserRole, DelCoreById, deleteUser, deleteUserRole, DelRoleById,
  info, listUserRole,
  QhueryRootByEmpl, queryByPerantId,
  queryCoreByuserId,
  QueryEmplByCoreId, QueryRoleAll, roleidbyUserId, stationByOrgId,
  UpdateCore,
  UpdateEmplByid, userByOrgId
} from '@/api/organ/Organ'

import { handleAllProvinces, handleCityChange, handleProvinceChange } from '@/api/order/order'
import user from '@/store/modules/user'
import item from '@/layout/components/Sidebar/Item.vue'
import order from '@/views/order/order.vue'

export default {

  data() {
    return {
      rules: {
        name: [
          {
            required: true,
            message: '请输入员工姓名',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              if (!/^[\u4e00-\u9fa5]+$/.test(value)) {
                callback(new Error('姓名必须是汉字'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱地址',
            trigger: 'blur'
          },
          {
            type: 'email',
            message: '邮箱地址格式不正确',
            trigger: ['blur', 'change']
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          },
          {
            pattern: /^1[0-9]{10}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ]
      },
      provinces: [],//省
      cities: [],//市
      districts: [],//区
      currentPage: 1, // 当前页数
      pageSize: 4, // 每页显示条数
      totalItems: 0,
      selectedRoles: [],
      RoolUserlist:[],
      RoleUser:{},
      emp:{},
      AllRole1:[],
      isOpen: false, // 控制对话框显示与隐藏
      tableRootData: [], // 表格数据
      dis:false,
      RootTable: [],
      UserTable:[],
      Station:[],
      imageUrl: '',
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5:false,
      employee: {
        id:"",
        name:"",
        org_id:"",
        station_id:"",
        email:"",
        mobile:"",
        sex:"",
        work_describe:"",
        create_user:"",
        update_user:"",
        status:"",
        account:"",
        password:""
      },

      core_org:{
        Aid:"",
        id:"",
        name:"",
        abbreviation:"",
        parent_id:"",
        org_type:"",
        province_id:"",
        city_id:"",
        county_id:"",
        address:"",
        contract_number:"",
        manager_id:"",
        tree_path:"",
        sort_value:"",
        status:"",
        describe:"",
        latitude:"",
        longitude:"",
        business_hours:"",
        create_user:"",
        update_time:"",
        update_user:"",
      },
      role: {
        id: '',
        name: '',
        code: '',
        describe: '',
        status: '',
        readonly: '',
        create_user: '',
        create_time: '',
        update_user: '',
        update_time: ''
      },
      radio: '1',
      selectedOption: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      inputValue: '品达物流集团有限公司',
      input: '',
      SZData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      multipleSelection: []
    }

  },
  created() {
    info(user.state.id).then(res => {
      this.SZData = this.processTreeData(res);
    });
    // 查询当前员工所在机构信息
    queryCoreByuserId(user.state.id).then(res => {

      this.core_org = res;

    }).then(() => {
      // 查询当前机构的所有员工信息
     this.fetchData();

    });

  },





  mounted() {

    this.initSelectedRoles(); // 初始化选中角色
  },

  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 回到第一页
      this.fetchData()


      // 发起请求获取对应页的数据
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
      // 发起请求获取对应页的数据
    },
    queryrool() {
      roleidbyUserId(this.employee.id).then(res => {
        if (res !== null) {
          //console.log(res);
          this.RootTable = res;
          console.log(this.RootTable.map(item => item.id))
          // if(this.RootTable.map(item => item.id)===true){
          //   this.selectedRoles = this.RootTable.map(item => item.id); // 将 RootTable 中的角色ID 设置为默认选中
          // }else{
          //   //this.selectedRoles = this.RootTable.map(item => item.id); // 将 RootTable 中的角色ID 设置为默认选中
          // }
        }
      });

      QueryRoleAll().then(res => {
        this.AllRole1 = res;
      });
    },


    isRoleSelected(role) {
      return this.RootTable.includes(role.id);
    },
    initSelectedRoles() {
      this.AllRole1.forEach(role => {
        if (this.RootTable.some(existingRole => existingRole.id === role.id)) {
          this.selectedRoles.push(role.id); // 如果角色在RootTable中存在，则默认选中
        }
      });
    },
    handleSubmit5() {
      this.selectedRoles.forEach(role => {
          this.RoleUser={
            role_id:role,
            user_id:this.employee.id,
            create_user:user.state.id
          }
        if (!this.RoolUserlist) {
          this.RoolUserlist = []; // 如果RoolUserlist为null，则初始化为一个空数组
        }
        this.RoolUserlist.push(this.RoleUser)
      });
      console.log(this.RoolUserlist)
      addUserRole(this.RoolUserlist).then(res=>{
        if(res.code==="200"){
          // alert("角色授予成功")
          this.$message({
            type: 'success',
            message: '角色授予成功!'
          });
        }else {
          // alert("角色授予失败")
          this.$message({
            type: 'success',
            message: '角色授予失败!'
          });
        }
      })
      this.queryrool();
      this.dialogVisible1=false;
      this.dialogVisible5=false;
      this.RoolUserlist=null;

    },

    AddRole() {
      this.dialogVisible5 = true
    },

    fetchData() {
      const postData = {
        org_id:this.core_org.id,
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        status:1
      };
      userByOrgId(postData).then(res => {
        console.log(res)
        this.UserTable=res.data.list;
        this.totalItems=res.data.total;

      });
    },

    // 定义递归处理函数
    processTreeData(data) {
      let newData = [];
      data.forEach(item => {
        let processedItem = this.processData(item); // 假设 processData 是另一个处理数据的方法
        if (item.children && item.children.length > 0) {
          processedItem.children = this.processTreeData(item.children); // 递归处理子节点
        }
        newData.push(processedItem);
      });
      return newData;
    },

    // //删除该员工角色
    // DelRole() {
    //   alert(user.state.id)
    //   deleteUserRole(this.employee.id).then(res => {
    //     if (res.code === "200") {
    //       alert("成功删除该员工角色")
    //       roleidbyUserId(this.employee.id).then(res => {
    //         if (res !== null) {
    //           this.RootTable = res;
    //           this.employee.id = null;
    //         }
    //       })
    //     } else {
    //       alert("删除失败")
    //     }
    //   })
    // },

    handleCustomAction1(nodeData) {
      this.dialogVisible4 = true;
      this.emp.parent_id =nodeData.id
      this.emp.manager_id=user.state.id
      this.emp.org_type = '';
      //查所有省
      handleAllProvinces().then(res=>{
        this.provinces = res;

      })

    },

    async handleSenderProvinceChange(value) {

      if (!value) {
        this.emp.city_id = '';
        this.emp.county_id = '';
        this.districts=[];
        console.log("发件人城市id====" + value);

      }
      //调用根据省份id查城市
      handleProvinceChange(value).then(response =>{
        this.cities = response
      })
    },

    async handleReceiverCityChange(value) {
      if (!value) {
        this.emp.county_id = '';
        this.districts=[];
      }
      //调用根据城市id查区县
      handleCityChange(value).then(response =>{
        this.districts = response
        console.log("收件人区县====" + response);
      })
    },

    handleCustomAction2(nodeData) {
      const postData = {
        org_id:nodeData.id,
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        status:1
      };
      userByOrgId(postData).then(res => {

        this.UserTable=res.data.list;
        this.totalItems=res.data.total;

      // });
      // userByOrgId(nodeData.id).then(res => {

        console.log(res)
        if (res.data.list.length === 0) {

          queryByPerantId(nodeData.id).then(queryRes => {

            if (queryRes.length === 0) {

              DelCoreById(nodeData.id).then(delRes => {
                // alert("删除机构成功")
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });

                if (delRes) {
                  // userByOrgId(this.core_org.id).then(employees => {
                  //   this.UserTable = employees.data;
                  //   info(user.state.id).then(res => {
                  //     this.SZData = this.processTreeData(res);
                  //   });
                  // });
                  this.fetchData();
                  info(user.state.id).then(res => {
                    this.SZData = this.processTreeData(res);
                  });
                }
              });
            }else {
              // alert("该公司存在分公司不符合删除条件")
              this.$message({
                type: 'success',
                message: '该公司存在分公司不符合删除条件!'
              });
            }
          });
        } else {
          // alert("该机构存在就职员工不符合删除该机构条件");
          this.$message({
            type: 'success',
            message: '该机构存在就职员工不符合删除该机构条件!'
          });
        }
      }).catch(error => {
        console.error("Error:", error);
      });

    },
    openDialog() {
      this.isOpen = true;
    }
    ,
    processData(item) {
      return {
        ...this.copyData(item.data),
        label: item.data.name,
        children: []
      };
    },

    copyData(data) {
      return { ...data };
    },

    disable(roedata) {
      // eslint-disable-next-line no-unused-vars
      var dis = confirm("确定要禁用 · " + roedata.name + " · 系统账号 · " + roedata.account + " 吗");
      if (dis) {
        // this.employee.status = 0
        roedata.avatar=""
        roedata.status=0;
        roedata.name='测试'
        UpdateEmplByid(roedata).then(res => {
          // alert("禁用ok")
          this.$message({
            type: 'success',
            message: '禁用ok!'
          });
          // this.fetchData();
        })
      }
    },

    updateEmpl(rowData) {
      this.dialogVisible3 = true
      this.employee = rowData
      console.log("编辑员工信息", rowData);
    },

    // eslint-disable-next-line no-unused-vars
    DelEmpl(rowdata) {
      // eslint-disable-next-line no-unused-vars
      var del = confirm("确定要删除 · " + rowdata.name + " · 系统账号 · " + rowdata.account + " 吗");
      // eslint-disable-next-line no-empty
      if (del) {
        deleteUser(rowdata.id).then(res => {
          // alert("删除成功")
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData();
        })
      }

    },

//查询角色数据
    updateRoot(rowData) {
      this.AllRole1 = []
      this.RootTable = []
      alert(rowData.id)
      this.employee.id = rowData.id;
      this.dialogVisible1 = true
      roleidbyUserId(rowData.id).then(res => {
        if (res !== null) {
          console.log("拥有的角色"+res)
          this.RootTable = res;
          console.log(this.RootTable)
          this.selectedRoles = this.RootTable.map(item => item.id); // 将 RootTable 中的角色ID 设置为默认选中
        }
      })
      QueryRoleAll().then(res => {
        this.AllRole1 = res;
      })


    },
    //添加员工
    AddEmp() {
      stationByOrgId(this.core_org.id).then(res => {
        if (res.data != null) {
          console.log(res.data)
          this.Station = res.data;
        }
      })
      this.dialogVisible = true
    },
    handleNodeClick(node) {
      this.core_org = node

      // userByOrgId(this.core_org.id).then(res=>{
      //   this.UserTable=res.data;
      // })
      this.fetchData();
    },
    //根据机构id查机构

//修改机构
    UpdateTranslation() {
      //调用后端机构修改接口
      // this.core_org.id=BigInt(this.core_org.aid)
      UpdateCore(this.core_org).then(res => {

        // this.created()
        info(user.state.id).then(res => {
          this.SZData = this.processTreeData(res);
        });
        if (res === true) {
          // alert("编辑成功")
          this.$message({
            type: 'success',
            message: '机构编辑成功!'
          });
        } else {
          // alert("编辑失败")
          this.$message({
            type: 'success',
            message: '机构编辑失败!'
          });
        }
      })
    },

    search() {

    },
    //添加机构
    handleSubmit4() {

      //后端添加机构接口
      AddCore(this.emp).then(res => {
        if (res) {
          this.$message({
            type: 'success',
            message: '机构添加成功!'
          });

          this.emp={}
          this.dialogVisible4 = false;
          info(user.state.id).then(res => {
            this.SZData = this.processTreeData(res);
          });
        } else {
          alert("添加失败")
        }
      })
    },
    handleSubmit1() {
      this.$refs.employeeForm.validate((valid) => {
        if (valid) {
          // 所有字段验证通过，执行保存操作
          this.employee.org_id = this.core_org.id;
          this.employee.create_user=user.state.id
          AddEmpl(this.employee).then(res => {
            if (res) {
              this.dialogVisible = false
              alert("添加成功")
              this.employee = {
                id: "",
                name: "",
                org_id: "",
                station_id: "",
                email: "",
                mobile: "",
                sex: "",
                work_describe: "",
                create_user: "",
                update_user: "",
                status: "",
              }
              this.fetchData();
            } else {
              this.employee = null;
              alert("添加失败")
            }
          })
          this.dialogVisible = false; // 关闭弹窗
        } else {
          this.$message.error('请正确输入员工信息'); // 提示用户请正确输入
        }
      });



    },

    handleSubmit2() {
      this.$refs.employeeForm.validate((valid) => {
        //调用后端添加角色接口
        if (valid) {
          console.log('表单提交成功')
          this.dialogVisible = false

        } else {
          console.log('请填写正确的员工信息')
        }
      })
    },

    handleSubmit3() {
      this.employee.avatar=""
      UpdateEmplByid(this.employee).then(res => {
        alert("修改员工成功")
        this.dialogVisible3 = false;
      })
    },

    // handleSubmit5() {
    //
    // },

    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
.input-container {
  position: relative; /* 容器位于其他内容之上 */
}

.star::before {
  content: "*"; /* 红色星号 */
  color: red;
  margin-right: 5px;
}

/* 根据需求调整样式 */
#myInput {
  border: 1px solid #ccc;
  padding: 5px;
  width: 200px;
}

.DivData {
  margin-left: 60px;
  margin-top: 10px;
}

.button-with-line {
  display: flex;
  align-items: center;
}

.button-with-line::after {
  content: '';
  border-top: 20px solid #000; /* 设置直线样式 */
  margin-left: 10px; /* 调整直线与按钮之间的距离 */
  width: 650px; /* 设置直线宽度 */
  border-top: 1px solid #41a3fc; /* 设置直线颜色为红色 */

}

.no-border {
  border: none;
}
.tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-icon {
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 3px;
}
</style>
